<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        .ss{
            color:sandybrown
        }
    </style> -->
</head>
<body>
    <pre>
        JQuery：对JavaScript对象和函数封装的一个封装库。
                功能：能快速开发js程序
        使用JQuery步骤：
            1) 下载JQuery
                   http://jquery.com
            2) html中引入JQuery
                   script标签的src属性引入
            3) 使用JQuery
                   通过写JQuery的语法来调用JQuery
        JQuery语法：
            $("选择器").方法名(参数)
            选择器：
                用于获取指定网页元素
            方法：
                实现逻辑功能的
        工厂函数[页面加载事件]
            $(document).ready( function(){
                //JQuery或JS代码
            } );
            类似于：window.onload=function(){}
            JQuery工厂函数可简写：
                $(function(){})

            作用：在页面加载时就将JQuery存储到浏览器。
                  建议将JQuery的代码都写到工厂函数中
        注意：
            浏览器默认识别JS，但不识别JQuery，所以需要在页面加载时将JQuery的代码加载(编译)到浏览器中
        JQuery的工厂函数和JS的onload函数区别：
            js：window.onload方法，会等浏览器加载完所有资源[DOM，内容、资源]
                页面中只会识别最后一个
                无简化方式
            JQ：工厂函数会等DOM结构加载完就开始执行[此时资源可能还没加载]
                可以写多个
                有简化方式
        强调：
            JS和JQuery的属性和方法，不能互通使用！

        JQuery语法包括两部分：
            1）选择器
                用于获取指定网页元素
                包括：
                    1、CSS选择器
                          基本选择器
                              标签选择器
                              类选择器
                              id选择器
                              并集选择器
                              交集选择器[标签选择器类选择器]
                              全局选择器
                          高级选择器
                              层次选择器
                                  后代选择器
                                  子选择器
                                  相邻元素选择器[参照节点后面紧挨着的一个元素]
                                  同辈元素选择器[后面的同辈元素]
                              属性选择器
                                  [属性名]
                                  [属性名=属性值]
                                  [属性名^=属性值]
                                  [属性名$=属性值]
                                  [属性名*=属性值]
                                  [属性名!=属性值]
                              过滤选择器
                                  基本过滤选择器
                                    :first 第一个的元素
                                    :last  最后一个的元素
                                    :not(选择器)  除了执行选择器以外的元素
                                    :even   下标是偶数的元素
                                    :odd    下标是奇数的元素
                                    :eq(index)  指定下标的元素
                                    :gt(index)  大于指定下标的元素
                                    :lt(index)  小于指定下标的元素
                                  可见性过滤选择器
                                    :visible   显示的
                                    :hidden    隐藏的

                    2、DOM元素对象
                          通过js获取dom对象，再放到JQuery选择器中

                    3、html完整标签
                          直接在选择器中写网页标签
                          
            2）方法
                css方法：获取和设置样式
                   获取属性值：JQuery对象.css("css属性名")
                   设置属性值：JQuery对象.css("css属性名","属性值")
        
        JS对象和JQ对象的相互转换：
            js对象/DOM对象 转 JQ对象：
                $(js对象)    转换后就是JQ对象，可以使用JQ的属性和方法
            JQ对象转JS对象：
                $().get(0)   转换后就是JS对象   [推荐]
                $()[0]   
            
    </pre>

    <p>
        这是第一段
    </p>
    <p class="sty1">
        这是第二段
    </p>
    <p class="sty1">
        这是第三段
    </p>
    <p id="id1">
        这是第四段
    </p>
    <h3 class="sty1">
        这是第五段
    </h3>
    <h3 >
        这是第六段
    </h3>
    <div>
        这是第七段
        <p>
            这是第八段
        </p>
        <h3>
            这是第九段
            <p>
                这是第十段
            </p>
        </h3>
    </div>
    <div>
        <h5>~~~</h5>
        <p>上一个P</p>
        <strong>参照物</strong>
        <em>
            <p>参下p</p>
        </em>
        <p>下一个P</p>
        <p>下二个P</p>
    </div>

    <div>
        <a href="1234.html">超链接一</a>
        <a href="456.htm">超链接二</a>
        <a href="183.htm">超链接三</a>
    </div>

    <li>第零项</li>
    <ul>
        <li class="sty1">第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>
    <li>第末项</li>

    <input type="button" value="点击隐藏" onclick="fn1()"> 
    <input type="button" value="点击显示" onclick="fn2()"> 
    <h4>
        显示和隐藏
    </h4>

    <input type="button" value="点击触发函数" id="btn"> 
    <br/>
    <br/>

    <div>
        <strong id="id2">演示DOM元素封装JQuery</strong>
    </div>
    <br/>
    <br/>

    <input type="checkbox" id="chk" />选中/不选中

    <script type="text/javascript" src="js/jQuery.js"></script>
    <script type="text/javascript" src="js/chapter1.js"></script>
</body>
</html>